<!-- Please remove this file from your project -->
<template>
  <div>
    <div class="header">
      <div class="nav">
        <nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#"><img src="~/assets/images/logo2.png" alt="logo" /></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#home" class="active scroll">首页</a></li>
                <li><a href="#about" class="scroll">介绍</a></li>
                <li><a href="#requirements" class="scroll">提升等级</a></li>
                <li><a href="#games" class="scroll">安装更新</a></li>
                <li><a href="#ourteam" class="scroll">ACR介绍</a></li>
                <li><a href="shuju/">数据统计</a></li>
              </ul>
            </div>
            <!-- navbar-collapse -->
          </div>
          <!-- container -->
        </nav>
      </div>
      <!-- Nav Ends -->
      <div class="banner" id="home">
        <div class="fullvid" style="height: 839px">
          <div class="videobox" style="width: 2543px; height: 1430.44px; margin-left: 0px; margin-top: -295.719px;">
            <video muted="muted" loop="loop" autoplay="autoplay" height="100%" width="100%" __idm_id__="573441">
              <source src="https://static.web.sdo.com/jijiamobile/pic/ff14/ffweb860/vidindex.mp4" type="video/mp4" />
            </video>
          </div>
          <div class="fullblack"></div>
        </div>
      </div>
      <!-- Banner Ends Here -->
    </div>
    <!-- Header Ends -->

    <div class="about" id="about">
      <div class="container">
        <h3>欢迎使用最终幻想 XIV 高难输出插件 <span>AEAssist 2.0</span></h3>
        <h4>
          目前的AEAssist基本满足了FF这边PVE的大部分需求<br />
          (ACR,亲信练级等,具体的看下面的激活码等级对应的功能)
        </h4>
        <div class="about-image">
          <div class="col-md-4 about-size">
            <div class="shadow">
              <img src="~/assets/images/ai1.jpg" alt="image" />
            </div>
            <h5>LV2及以下:</h5>
            <p>可以用ACR+时间轴</p>
          </div>
          <div class="col-md-4 about-size">
            <div class="shadow">
              <img src="~/assets/images/ai2.jpg" alt="image" />
            </div>
            <h5>LV3</h5>
            <p>
              额外解锁亲信+TP+移速+百宝箱(板子,雇员,无人岛,潜艇等)+被LV4拖过本功能
              (TP包括近战的自动身位,鼠标指向TP,滑步TP等)
            </p>
          </div>
          <div class="col-md-4 about-size">
            <div class="shadow">
              <img src="~/assets/images/ai3.jpg" alt="image" />
            </div>
            <h5>LV4</h5>
            <p>
              额外解锁多个高级hack功能(你知道的都有),百宝箱等功能的限制次数提升.
              支持全自动打本(1拖7.进本可以关屏幕等低保+1的那种)
            </p>
          </div>
          <div class="clearfix"></div>
        </div>
        <!-- About-image Ends  -->
      </div>
      <!-- Container ends -->
    </div>
    <!-- About Ends -->

    <div class="requirement" id="requirements">
      <!-- Requirements Starts   -->
      <div class="container">
        <div class="all-require">
          <div class="heading">
            <h3>如何<span> 提升</span>激活码等级</h3>
          </div>
          <div class="specification">
            <div class="col-md-4 require-size">
              <div class="grid">
                <i class="pc"> </i>
                <p>LV3 :</p>
                <p>
                  写过一个轴/花费了5+小时的时间参与了开发者某个专项测试/较多的反馈问题or提供建议/拉了7个人入坑(传销.jpg)
                </p>
              </div>
            </div>
            <div class="col-md-4 require-size">
              <div class="grid">
                <i class="xbox"> </i>
                <h5>LV4 :</h5>
                <p>
                   写过>=5个轴/做出了很突出的贡献/写过ACR(面向日随/练级,或者面向高难,但优化不够)
                </p>
                <div class="grid-bottom"></div>
              </div>
            </div>
            <div class="col-md-4 require-size">
              <div class="grid">
                <i class="ps"> </i>
                <h5>LV5 :</h5>
                <p>
                  写过ACR(面向高难),且优化突出/花费了很多很多时间,做出了非常突出的贡献
                </p>
                <div class="grid-bottom"></div>
              </div>
            </div>
            <div class="clearfix"></div>
          </div>
          <!-- Specification Ends here   -->
        </div>
      </div>
    </div>
    <!-- requirement Ends -->

    <div class="upcoming" id="games">
      <div class="container">
        <div class="padding-upcoming">
          <h3>如何<span>安装/更新</span> AE插件</h3>
          <div class="background shadow1">
            <div id="parentVerticalTab">
              <div class="col-md-7 trailer game-video">
                <div class="resp-tabs-container hor_1">
                  <div>
                    <div class="category">
                      <iframe width="560" height="315"
                        src="http://player.bilibili.com/player.html?aid=746093055&bvid=BV13k4y1F7Cq&cid=1270970420&p=1"
                        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
                    </div>
                  </div>
                  <div>
                    <div class="category">
                      <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
                    </div>
                  </div>
                  <div>
                    <div class="category">
                      <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>
              <div class="col-md-5 trailer-text game-image">
                <ul class="resp-tabs-list hor_1">
                  <li>
                    <div class="sub-trailer">
                      <div class="sub-img">
                        <img src="~/assets/images/up1.jpg" alt="img07" />
                      </div>
                      <div class="sub-text">
                        <h4>
                          <a href="https://docs.qq.com/doc/DVWxNZWx1ZW5qVFZC" target="_blank">安装教程</a>
                        </h4>
                        <p>安装教程…</p>
                      </div>
                      <div class="clearfix"></div>
                    </div>
                  </li>
                  <li>
                    <div class="sub-trailer">
                      <div class="sub-img">
                        <img src="~/assets/images/up2.jpg" alt="img07" />
                      </div>
                      <div class="sub-text">
                        <h4>
                          <a href="https://docs.qq.com/doc/DU3lyY3VxV2lneVZF" target="_blank">使用说明</a>
                        </h4>
                        <p>暂缺…</p>
                      </div>
                      <div class="clearfix"></div>
                    </div>
                  </li>
                  <li>
                    <div class="sub-trailer">
                      <div class="sub-img">
                        <img src="~/assets/images/up3.jpg" alt="img07" />
                      </div>
                      <div class="sub-text">
                        <h4>
                          <a href="https://docs.qq.com/sheet/DSVhTcXhORmR1QU9m?tab=BB08J2" target="_blank">问题反馈</a>
                        </h4>
                        <p>暂缺…</p>
                      </div>
                      <div class="clearfix"></div>
                    </div>
                  </li>
                  <div class="clearfix"></div>
                </ul>
              </div>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- upcoming Ends -->

    <div class="our-team">
      <div class="container">
        <div class="team" id="ourteam">
          <h3>ACR介绍</h3>
          <div class="team-up">
            <div class="col-md-3 team-size">
              <div class="team-img">
                <img src="~/assets/images/t1.jpg" alt="image" />
                <h4>Fra</h4>
                <p>介绍</p>
              </div>
            </div>
            <div class="col-md-3 team-size">
              <div class="team-img">
                <img src="~/assets/images/t2.jpg" alt="image" />
                <h4>Amatsukaze</h4>
                <p>介绍</p>
              </div>
            </div>
            <div class="col-md-3 team-size">
              <div class="team-img">
                <img src="~/assets/images/t3.jpg" alt="image" />
                <h4>Archetto</h4>
                <p>介绍</p>
              </div>
            </div>
            <div class="col-md-3 team-size">
              <div class="team-img">
                <img src="~/assets/images/t6.jpg" alt="image" />
                <h4>NiGuangOwO</h4>
                <p>介绍</p>
              </div>
            </div>
            <div class="clearfix"></div>
          </div>
          <!-- Team-up ends here -->
          <div class="team-bottom">
            <div class="col-md-3 team-size">
              <div class="team-img">
                <img src="~/assets/images/t4.jpg" alt="image" />
                <h4>Anmi</h4>
                <p>摆烂安,突出一个摆烂,制作了武士、龙骑、赤魔ACR。</p>
              </div>
            </div>
            <div class="col-md-3 team-size">
              <div class="team-img">
                <img src="~/assets/images/t5.jpg" alt="image" />
                <h4>HS</h4>
                <p>介绍</p>
              </div>
            </div>
            <div class="col-md-3 team-size">
              <div class="team-img">
                <img src="~/assets/images/t8.jpg" alt="image" />
                <h4>初春</h4>
                <p>介绍</p>
              </div>
            </div>
            <div class="col-md-3 team-size">
              <div class="team-img">
                <img src="~/assets/images/t7.jpg" alt="image" />
                <h4>YoYo</h4>
                <p>介绍</p>
              </div>
            </div>
            <div class="clearfix"></div>
          </div>
          <!-- Team-bottom ends here -->
          <div class="clearfix"></div>
        </div>
        <!-- Team Ends -->
      </div>
    </div>
    <!-- Our-team Ends -->

    <div class="contact" id="contact">
      <div class="container">
        <div class="padding-contact">
          <div class="col-md-4 address">
            <h3>联系方式</h3>
            <address>
              保密<br />
              无可奉告,<br />
              自己找一下,<br />
              有QQ群<br />
              号码忘了<br />
              <span>Phone : +123 4567 8900</span>
            </address>
          </div>
          <div class="col-md-4 social-icons">
            <h3>Follow Us</h3>
            <ul class="social">
              <li>
                <a href="#" class="facebook" title="Go to Our Facebook Page"></a>
              </li>
              <li>
                <a href="#" class="twitter" title="Go to Our Twitter Account"></a>
              </li>
              <li>
                <a href="#" class="googleplus" title="Go to Our Google Plus Account"></a>
              </li>
              <li>
                <a href="#" class="instagram" title="Go to Our Instagram Account"></a>
              </li>
              <li>
                <a href="#" class="youtube" title="Go to Our Youtube Channel"></a>
              </li>
            </ul>
          </div>
          <div class="col-md-4 newsletter">
            <h3>联系邮件</h3>
            <form>
              <input type="text" value="Enter Your email" onfocus="this.value = '';"
                onblur="if (this.value == '') {this.value = 'Enter Your email';}" />
              <input type="submit" value="Subscribe" />
            </form>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="footer">
          <p>
            Copyright &copy; 2021.Company name All rights reserved.<a target="_blank"
              href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
          </p>
        </div>
      </div>
    </div>
    <!-- contact Ends -->
  </div>
</template>

<script>
import $ from "jquery";
// import 'easy-responsive-tabs'

export default {
  name: "NuxtTutorial",
  mounted() {
    $(document).ready(function ($) {
      $(".scroll").click(function (event) {
        event.preventDefault();
        $("html,body").animate(
          {
            scrollTop: $(this.hash).offset().top,
          },
          2000
        );
      });
    });

    $(document).ready(function () {
      //Vertical Tab
      $("#parentVerticalTab").easyResponsiveTabs({
        type: "vertical", //Types: default, vertical, accordion
        width: "auto", //auto or any width like 600px
        fit: true, // 100% fit in a container
        closed: "accordion", // Start closed if in accordion view
        tabidentify: "hor_1", // The tab groups identifier
        activate: function (event) {
          // Callback function if tab is switched
          var $tab = $(this);
          var $info = $("#nested-tabInfo2");
          var $name = $("span", $info);
          $name.text($tab.text());
          $info.show();
        },
      });
    });
  },
};
</script>

<style>
/* @import "~/assets/css/easy-responsive-tabs.css";
@import "~/assets/css/style.css"; */
</style>
